<template>
  <section class="wrapper">
    <!-- 环状图 -->
    <h3>环状图</h3>
    <div class="row">
      <index-circle></index-circle>
    </div>
    <!-- 柱状图 -->
    <h3>柱状图</h3>
    <div class="row">
      <index-bar2></index-bar2>
    </div>
    <!-- pie -->
    <h3>环形图</h3>
    <div class="row">
      <index-pie></index-pie>
    </div>
    <!-- bar -->
    <h3>横-柱状图</h3>
    <div class="row">
      <index-bar></index-bar>
    </div>
    <!-- line -->
    <h3>折线图</h3>
    <div class="row">
      <index-line></index-line>
    </div>
  </section>
</template>
<script>
import pie from './d3/pie'
import bar from './d3/bar'
import line from './d3/line'
import bar2 from './d3/bar2'
import circle from './d3/circle'

export default {
  components: {
    indexPie: pie,
    indexBar: bar,
    indexLine: line,
    indexBar2: bar2,
    indexCircle: circle
  }
}
</script>
<style lang="scss" scoped>
  .wrapper {
    width: 100%;
  }
  .row {
    margin-top: 30px;
    text-align: center;
  }
</style>
